<template>
  <div class="container">
    <div class="m-title"><span class="icon"></span>甲乙端客户列表</div>
    <el-form label-width="80px">
      <el-row :gutter="3" class="m-contain">
        <el-col :span="5" :offset="1">
          <el-form-item label="客户编码:" class="u-ipt">
            <el-input
              placeholder=""
              v-model="custData.custCode"
              class="input-with-select"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="客户名称:" class="u-ipt">
            <el-input
              placeholder=""
              v-model="custData.custName"
              class="input-with-select"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-button type="primary" class="btnClass" @click="checkInfo"
            >查询</el-button
          >
          <el-button type="primary" class="btnClass" @click="emptyInfo"
            >清空</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="custTableData"
      border
      stripe
      max-height="500"
      :header-cell-style="{
        background: '#F2F2F2',
        color: '#333',
      }"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column
        fixed
        label="序号"
        align="center"
        type="index"
        width="80"
      >
      </el-table-column>
      <el-table-column
        fixed
        prop="oldPartyCode"
        label="客户编码"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        fixed
        prop="custName"
        label="客户名称"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        fixed
        prop="createDate"
        label="创建时间"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            class="editBtn"
            @click="HandleJournalClick(scope.row)"
            type="text"
            size="small"
            >操作日志</el-button
          >
          <el-button
            class="editBtn"
            @click="jumpPerfect(scope.row)"
            type="text"
            size="small"
            >完善</el-button
          >
          <el-button
            class="delBtn"
            type="text"
            size="small"
            @click="watchClick(scope.row)"
            >查看审核历史</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @current-change="pageChange"
      :current-page="parseInt(tableListPage.pageIndex)"
      :page-size="parseInt(tableListPage.pageSize)"
      layout="total, prev, pager, next, jumper"
      :total="parseInt(tableListPage.rowCount)"
      class="m-pagination"
    >
    </el-pagination>
    <el-dialog
      width="70%"
      title="操作日志"
      :visible.sync="journalVisible"
      :close-on-click-modal="false"
      append-to-body
      class="m-dialog"
    >
      <el-dialog
        width="60%"
        title="修改信息明细"
        :visible.sync="innerVisible"
        append-to-body
        class="m-dialog"
      >
        <el-table
          :data="mxTableData"
          border
          stripe
          style="width: 100%"
          max-height="500"
          :header-cell-style="{
            background: '#F2F2F2',
            color: '#333',
          }"
          tooltip-effect="dark"
        >
          <el-table-column label="序号" align="center" type="index" width="50">
          </el-table-column>
          <el-table-column
            prop="custName"
            label="属性名称"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="custName"
            label="新属性值"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="custName"
            label="原属性值"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="custName"
            label="修改时间"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
        </el-table>
        <el-pagination
          background
          @current-change="mxPageChange"
          :current-page="parseInt(mxTableListPage.pageIndex)"
          :page-size="parseInt(mxTableListPage.pageSize)"
          layout="total, prev, pager, next, jumper"
          :page-sizes="[5, 10, 20, 50, 100]"
          :total="parseInt(mxTableListPage.rowCount)"
          class="m-pagination"
        >
        </el-pagination>
        <div style="height: 30px"></div>
      </el-dialog>
      <el-table
        :data="czTableData"
        border
        stripe
        style="width: 100%"
        :header-cell-style="{
          background: '#F2F2F2',
          color: '#333',
        }"
        tooltip-effect="dark"
      >
        <el-table-column label="序号" align="center" type="index" width="50">
        </el-table-column>
        <el-table-column
          prop="custName"
          label="客户名称"
          align="center"
          width="240"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="remark"
          label="操作类型"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="operationByName"
          label="操作人"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="operationByCode"
          align="center"
          label="操作人账号"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="operationByOrgName"
          align="center"
          label="操作人组织"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="operationDate"
          align="center"
          width="150"
          label="操作时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <!-- <el-table-column
          prop="operation"
          align="center"
          label="操作"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button
              class="editBtn"
              @click="mxHandleClick(scope.row)"
              type="text"
              size="small"
              >明细</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination
        background
        @current-change="czPageChange"
        :current-page="parseInt(czTableListPage.pageIndex)"
        :page-size="parseInt(czTableListPage.pageSize)"
        layout="total, prev, pager, next, jumper"
        :total="parseInt(czTableListPage.rowCount)"
        class="m-pagination"
      >
      </el-pagination>
      <div style="height: 50px"></div>
    </el-dialog>
    <el-dialog
      width="70%"
      title="客户审核页面"
      :close-on-click-modal="false"
      :visible.sync="watchVisible"
      append-to-body
      class="m-dialog"
    >
      <review-history :tablePage = "shTablePage" :shTableData="shTableData" @ShChangePage = 'ShChangePage'></review-history>
    </el-dialog>
  </div>
</template>

<script>
import reviewHistory from "@/views/customer/components/reviewHistory";
import ABCustManage from "@/api/customer/ABCustManage";
export default {
  data() {
    return {
      custData: {
        custCode: "",
        custName: "",
      }, //查询信息数据
      custTableData: [], //客户信息列表
      czTableData: [], //操作日志列表
      mxTableData: [], //明细日志列表
      tableListPage: {
        pageIndex: 1, //当前页码
        pageSize: 5, //每页多少条
        rowCount: 3, //总条数
      },
      czTableListPage: {
        pageIndex: 1, //当前页码
        pageSize: 5, //每页多少条
        rowCount: 3, //总条数
      },
      mxTableListPage: {
        pageIndex: 1, //当前页码
        pageSize: 5, //每页多少条
        rowCount: 3, //总条数
      },
      journalVisible: false, //操作日志弹窗
      watchVisible: false, //审核历史弹窗
      innerVisible: false, //信息明细弹窗
      shTableData: [], //查看审核历史
      shTablePage:{
        pageIndex: 1, //当前页码
        pageSize: 5, //每页多少条
        rowCount: 3, //总条数
      },//审核历史分页
      custId:'',//查看审核历史标识
    };
  },

  components: {
    reviewHistory,
  },

  computed: {},

  mounted() {
    this.ABCustManage();
  },

  methods: {
    async ABCustManage() {
      let params = {
        pageIndex: this.tableListPage.pageIndex,
        pageSize: this.tableListPage.pageSize,
        custNameLike: this.custData.custName,
        oldPartyCodeLike: this.custData.custCode,
      };
      const response = await ABCustManage.getCustAbList(params);
      if (response.code == 200) {
        this.tableListPage.rowCount = response.meta.pageInfo.rowCount;
        this.custTableData = response.meta.executeSqlResp;
        this.custTableData.forEach((item) => {
          item.createDate =
            item.createDate.substring(0, 4) +
            "-" +
            item.createDate.substring(4, 6) +
            "-" +
            item.createDate.substring(6, 8) +
            " " +
            item.createDate.substring(8, 10) +
            ":" +
            item.createDate.substring(10, 12) +
            ":" +
            item.createDate.substring(12, 14);
        });
      }
    },
    async getCustLogList(val) {
      let params = {
        pageIndex: this.czTableListPage.pageIndex,
        pageSize: this.czTableListPage.pageSize,
        custId: val.custId,
      };
      const response = await ABCustManage.getCustLogList(params);
      if (response.code == 200) {
        this.tableListPage.czTableListPage = response.meta.pageInfo.rowCount;
        this.czTableData = response.meta.custLogList;
        this.czTableData.forEach((item) => {
          item.operationDate =
            item.operationDate.substring(0, 4) +
            "-" +
            item.operationDate.substring(4, 6) +
            "-" +
            item.operationDate.substring(6, 8) +
            " " +
            item.operationDate.substring(8, 10) +
            ":" +
            item.operationDate.substring(10, 12) +
            ":" +
            item.operationDate.substring(12, 14);
        });
      }
    },
    //操作日志点击事件
    HandleJournalClick(val) {
      this.getCustLogList(val);
      this.journalVisible = true;
    },
    //完善点击事件
    async jumpPerfect(row) {
      let params = {
        custAuditKind:'1',
        custId:row.custId
      };
      const response = await ABCustManage.checkCustAudit(params);
      if(response.code == 200){
        if(response.meta.COUNT == 0){
          this.$router.push({
            path: "/perfectInformation",
            query: {
              custId: row.custId,
              custName: row.custName,
              partyId: row.partyId,
            },
          });
        }else {
          this.$confirm("该客户已在审核中,不能进行完善操作！", "提示", {
            confirmButtonText: "关闭",
            showCancelButton: false,
            type: 'warning',
            center: true,
          })
        }
      }
    },
    //查看审核历史
    watchClick(row) {
      this.watchVisible = true;
      this.custId = row.custId
      this.shTablePage.pageIndex = 1
      this.watchHistory();
    },
    //
    async watchHistory(){
      let params = {
        custId: this.custId,
        pageIndex: this.shTablePage.pageIndex,
        pageSize: 5,
      };
      const response = await ABCustManage.getCustAuditList(params);
      if (response.code == 200) {
        let res = response.meta;
        this.shTableData = res.custAuditList || [];
        if (this.shTableData) {
          this.shTableData.forEach((item) => {
            item.auditStatus = item.auditStatus == 1 ? "同意" : "不同意";
            item.auditDate = item.auditDate ?
              item.auditDate.substring(0, 4) +
              "-" +
              item.auditDate.substring(4, 6) +
              "-" +
              item.auditDate.substring(6, 8) +
              " " +
              item.auditDate.substring(8, 10) +
              ":" +
              item.auditDate.substring(10, 12) +
              ":" +
              item.auditDate.substring(12, 14):''
          });
        }
        this.shTablePage.rowCount = Number(res.pageInfo.rowCount);
      } else {
        this.$notify.error({
          title: "错误",
          message: response.msg,
        });
      }
    },
    // 查看历史审核记录分页
    ShChangePage(val) {
      this.shTablePage.pageIndex = val
      this.watchHistory()
    },
    //页面改变触发事件
    pageChange(val) {
      this.tableListPage.pageIndex = val;
      this.ABCustManage();
    },
    //操作日志页码改变触发事件
    czPageChange() {
      this.czTableListPage.pageIndex = val;
      this.ABCustManage();
    },
    //明细页码改变触发事件
    mxPageChange(){
      
    },
    //查询客户信息
    checkInfo() {
      this.ABCustManage();
    },
    //明细弹窗
    mxHandleClick() {
      this.innerVisible = true;
    },
    //清空搜索信息
    emptyInfo() {
      this.custData = {
        custCode: "",
        custName: "",
      };
    },
  },
};
</script>
<style lang='scss' scoped>
.container {
  padding: 0.2rem;
  height: 100%;
  background-color: #fff;
  .btnClass {
    width: 80px;
  }
}
.m-pagination {
  text-align: right;
  margin: 10px 30px 0 0;
}
.m-title {
  margin-bottom: 20px;
  color: #0052d9;
  font-size: 12px;
}
.m-title .icon {
  float: left;
  display: block;
  width: 3px;
  height: 12px;
  background: #f56f3c;
  margin-top: 2px;
  margin-right: 10px;
  font-size: 14px;
}
</style>